<template>
    <div>
        <div>
            <!-- 搜索表单区域 -->
            <common-form ref="searchUserFormRef" inline :form="searchForm" :formLabel="searchFormLabel" >
                <el-button type="primary" icon="el-icon-search" size="mini" @click="searchUser">搜索</el-button>
                <el-button  icon="el-icon-refresh" size="mini" @click="resetUser">重置</el-button>
            </common-form>

            <div >
                <!-- 导出 excel 表格 -->
                <el-popover
                  placement="top"
                  width="200"
                  >
                  <p style="font-size:13px;"><i class="el-icon-s-opportunity" style="color: green;"></i> 请选择你所需要导出的类型！</p>
                  <div style="text-align: right; margin: 0">
                      <export-excel Type="info" :excelData="allSelection" :excelTitle="excelTitle" :excelHeader="excelHeader" :excelVal="excelVal">全部</export-excel>
                      <export-excel Type="success" :excelData="multipleSelection" :excelTitle="excelTitle" :excelHeader="excelHeader" :excelVal="excelVal">选中项</export-excel>
                  </div>
                  <el-button slot="reference" type="warning" size="mini" icon="el-icon-s-data" @click="exlAll()">EXCEL</el-button>
                </el-popover>
            </div>
            <common-table
              :tableData="userTable" :tableLabel="userTableLabel" :config="config"
              @changeStatus="changeStatus" @changeSelect="changeSelect" >
            </common-table>
        </div>
    </div>
</template>

<script>
import CommonForm from '../../components/CommonForm'
import CommonTable from '../../components/CommonTable'
import ExportExcel from '../../components/ExportExcel'

export default {
  components: {
    CommonForm,
    CommonTable,
    ExportExcel
  },
  data () {
    return {
      // 搜索表单
      searchForm: {
        text: '', // 用户名
        sex: '',
        status: '',
        date: ''
      },
      // 搜索表单label
      searchFormLabel: [
        {
          model: 'text',
          label: '用户名',
          type: 'input'
        },
        {
          model: 'sex',
          label: '性别',
          type: 'select',
          opts: [
            {
              value: '',
              label: '全部'
            },
            {
              value: 0,
              label: '男生'
            },
            {
              value: 1,
              label: '女生'
            }
          ]
        },
        {
          model: 'status',
          label: '状态',
          type: 'select',
          opts: [
            {
              value: '',
              label: '全部'
            },
            {
              value: 1,
              label: '可用'
            },
            {
              value: 0,
              label: '禁用'
            }
          ]
        },
        {
          model: 'date',
          label: '时间',
          type: 'date'
        }
      ],
      // 用户数据
      userTable: [],
      // 用户数据label
      userTableLabel: [
        {
          prop: 'headUrl',
          label: '头像',
          type: 'headImg'
        },
        {
          prop: 'username',
          label: '用户名',
          type: ''
        },
        {
          prop: 'age',
          label: '年龄'
        },
        {
          prop: 'sexLabel',
          label: '性别',
          type: 'tag'
        },
        {
          prop: 'email',
          label: '绑定邮箱'
        },
        {
          prop: 'phone',
          label: '绑定电话'
        },
        {
          prop: 'status',
          label: '状态',
          type: 'switch'
        },
        {
          prop: 'createTime',
          label: '注册日期'
        }
      ],
      // table配置对象
      config: {
        loading: false,
        current: 0,
        size: 0,
        total: 0,
        btn: []
      },
      // 请求页面参数
      pageConfig: {
        text: '',
        sex: '',
        email: '',
        phone: '',
        status: '',
        leftTime: '',
        rightTime: '',
        condition: '',
        current: 1,
        size: 5
      },
      // 控制按钮是否可用
      disAbled: true,
      // 选中表格数据返回数组
      multipleSelection: [],
      // 导出表格的所有数据缓存
      allSelection: [],
      // 自定义导出 excel 表头
      excelHeader: ['用户名', '密码', '年龄', '性别', '邮箱', '电话', '账号状态', '注册日期', '更改日期'],
      // 自定义导出 excel 字段
      excelVal: ['username', 'password', 'age', 'sexLabel', 'email', 'phone', 'statusLabel', 'createTime', 'updateTime'],
      // 自定义导出 excel 文件名
      excelTitle: '用户列表'
    }
  },
  methods: {
    // 获取用户列表
    async getUserList () {
      this.config.loading = true
      const { data: res } = await this.$http.post('/user/page', this.pageConfig)
      console.log('用户列表', res)
      if (res.code !== 200) {
        this.config.loading = false
        return this.$message.error('获取商品分类列表失败！')
      }
      // 用户列表赋值
      const result = res.data
      const imgUrl = 'https://phone-shop.oss-cn-beijing.aliyuncs.com/'
      this.userTable = result.list.map(item => {
        item.user.headUrl = imgUrl + item.user.headUrl
        item.user.sexLabel = item.user.sex === 1 ? '女' : '男'
        if (item.user.age === null) item.user.age = '未知'
        if (item.user.status === 1) {
          item.user.status = true
        } else {
          item.user.status = false
        }
        return item.user
      })
      console.log('用户列表', this.userTable)
      this.config.total = result.total
      this.config.current = result.current
      this.config.size = result.size
      this.config.loading = false
    },
    // 点击搜索返回表单数据
    searchUser () {
      var form = this.$refs.searchUserFormRef.form
      console.log('搜索表单', form)
      this.pageConfig.text = form.text
      if (form.status !== '') {
        this.pageConfig.status = form.status
      } else {
        this.pageConfig.status = ''
      }
      if (form.sex !== '') {
        this.pageConfig.sex = form.sex
      } else {
        this.pageConfig.sex = ''
      }
      if (form.date) {
        this.pageConfig.leftTime = form.date[0]
        this.pageConfig.rightTime = form.date[1]
        this.pageConfig.condition = 0
      } else {
        this.pageConfig.leftTime = this.pageConfig.rightTime = this.pageConfig.condition = ''
      }
      // console.log('配置参数', this.pageConfig)
      this.getUserList()
    },
    // 点击重置表单数据
    resetUser () {
      for (const key in this.pageConfig) {
        if (key !== 'current' && key !== 'size') { this.pageConfig[key] = '' }
      }
      for (const key in this.searchForm) {
        this.searchForm[key] = ''
      }
      this.getUserList()
    },
    // 改变状态
    async changeStatus (row) {
      var ids = []
      ids.push(row.id)
      const { data: res } = await this.$http.post('/user/update', {
        ids: ids,
        newHeadUrl: '',
        newUsername: '',
        status: row.status ? 1 : 0
      })
      // console.log('改变status', res)
      if (res.code !== 200) {
        return this.$message.error('状态改变失败！')
      }
      this.$message.success('状态改变成功！')
      this.getUserList()
    },
    // 表格选择获取数据
    changeSelect (val) {
      this.multipleSelection = val.map(item => {
        item.statusLabel = item.status === 1 ? '正常' : '禁用'
        return item
      })
      // console.log(this.multipleSelection)
      // 如果选择数据大于 0 则固定按钮可使用
      if (this.multipleSelection.length > 0) {
        this.disAbled = false
      } else {
        this.disAbled = true
      }
    },
    // 导出全部
    async exlAll () {
      var queryInfo = {
        text: '',
        sex: '',
        email: '',
        phone: '',
        status: '',
        leftTime: '',
        rightTime: '',
        condition: '',
        current: 1,
        size: this.config.total
      }
      const { data: res } = await this.$http.post('/user/page', queryInfo)
      if (res.code !== 200) {
        return this.$message.error('获取用户列表失败！')
      }
      // 用户列表赋值
      const result = res.data
      const imgUrl = 'https://phone-shop.oss-cn-beijing.aliyuncs.com/'
      this.allSelection = result.list.map(item => {
        item.user.headUrl = imgUrl + item.user.headUrl
        item.user.sexLabel = item.user.sex === 1 ? '女' : '男'
        if (item.user.age === null) item.user.age = '未知'
        if (item.user.status === 1) {
          item.user.statusLabel = '可用'
        } else {
          item.user.statusLabel = '禁用'
        }
        return item.user
      })
      // console.log('全部数据', this.allSelection)
    }
  },
  created () {
    this.getUserList()
  }
}
</script>

<style lang="scss" scoped>

</style>
